<template>
	<view class="monitor">
		<view class="title">
			<text>实时监测</text>
		</view>
		<view class="search-bar">
			<view class="search-bar__content" v-if="!showQuery" @click="handleQuery(true)">
				<icon type="search" color="#ddd" size="16"></icon>
				<text>{{query || '请输入您想要查询的监测点'}}</text>
			</view>
			<view class="search-bar__content" v-if="showQuery">
				<icon type="search" color="#ddd" size="16"></icon>
				<input v-model="query" type="text" class="search-input" :focus="focus" @input="search"/>
				<button class="search-button" size="mini" plain @click="handleQuery(false)">取消</button>
			</view>
		</view>
		<map id="mapDiv" class="mapDiv" :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers"
		 @regionchange="regionChange" @markertap="handleMarkerClick" @tap="mapClick"></map>

	</view>
</template>

<script>
	import { ajax } from "../../api/apis";
	import mapInfo from "./mapInfo";
	export default {
		data() {
			return {
				query:"",
				showQuery:false,
				focus:false,
				map: null, //地图对象
				position_data: [], //地图点源数据
				markers: [],
				scale: 12,
				longitude:"103.9117594325",
				latitude:"33.1557136682",
				markers_zc: [],
				markers_js: [],
				markers_jj: [],
				markers_jb: [],
				infoWindow:false,

				icon_jb: "../../static/image/ic_jbj.png", //警报
				icon_jj: "../../static/image/ic_jjj.png", //警戒
				icon_js: "../../static/image/ic_jsj.png", //警示
				icon_zc: "../../static/image/ic_zcj.png", //正常
			};
		},
		created(){
			uni.getSubNVueById('info-window').hide('slide-in-bottom');
			uni.getSubNVueById('search').hide('slide-in-right');
		},
		onReady() {
			this.map = uni.createMapContext("mapDiv", this);
			this.bindPoint();

			uni.$on('marker-showoff-click', data => { //点击眼睛展示/取消 markers
				let zc = data.showZC ? this.markers_zc : [];
				let js = data.showJS ? this.markers_js : [];
				let jj = data.showJJ ? this.markers_jj : [];
				let jb = data.showJB ? this.markers_jb : [];
				this.markers = [...zc, ...js, ...jj, ...jb];
			});
			
			uni.$on('search-result-click', data => { //查询到的搜索结果
				const marker = this.markers.find(item=>item.id==data.monitoringPositionID);
				this.scale = 16;
				this.latitude = marker.latitude;
				this.longitude = marker.longitude;
				this.infoWindow = true;
				uni.getSubNVueById('info-window').show('slide-in-top',300);
				uni.getSubNVueById('search').hide('slide-in-right');
				this.handleQuery(false);
				
				uni.$emit('marker-click',marker.attr);
			})
			
			uni.$on('history-click', data => { //点击历史记录
				this.query = data;
			});
			
			uni.$on('map-scale', type => { //地图缩放
				switch(type){
					case 'plus':
						this.scale += 1;
						break;
					case 'minus':
						this.scale -= 1;
						break;
					default: break;
				}
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('marker-showoff-click');
			uni.$off('search-result-click');
			uni.$off('history-click');
			uni.$off('map-scale');
		},
		methods: {
			handleQuery(flag){
				if(flag){
					this.showQuery = true;
					uni.getSubNVueById('search').show('slide-in-left');
					setTimeout(()=>{
						this.focus = true;
					},600);
					
				}else{
					this.showQuery=false;
					this.focus = false;
					uni.getSubNVueById('search').hide('slide-in-right');
				}
			},
			search(){
				ajax({
					url:"/monitoringPosition/getMonitoringPositionPrewarningLevel",
					method:"POST",
					data:{
						monitoringPositionName: this.query
					},
					success:(res)=>{
						uni.$emit('search-result',res.data.data);
					}
				})
			},
			bindPoint() {
				ajax({
					url:"/monitoringPosition/getMonitoringPositions",
					method:"POST",
					success:(res)=>{
						if (res.data.state === 1) {
							this.position_data = res.data.data;
							this.getMarkers();
						}
					}
				})
				// uni
				// 	.request({
				// 		url: "http://125.70.231.243:49527/monitoringPosition/getMonitoringPositions",
				// 		method: "POST"
				// 	})
				// 	.then(([error, res]) => {
				// 		console.log(res);
				// 		if (res.data.state === 1) {
				// 			this.position_data = res.data.data;
				// 			this.getMarkers();
				// 		}
				// 	});
			},
			getMarkers() {
				let markers_jb = [];
				let markers_jj = [];
				let markers_js = [];
				let markers_zc = [];
				this.position_data.forEach(item => {
					if (item.gps) {
						const [latitude, longitude] = item.gps && item.gps.split(",");
						const iconPath = {
							1: this.icon_jb,
							2: this.icon_jj,
							3: this.icon_js,
							4: this.icon_zc
						} [item.prewarningLevelID];
						let marker = {
							//点位信息
							id: item.monitoringPositionID,
							longitude: longitude,
							latitude: latitude,
							iconPath,
							width: 24,
							height: 24,
							attr: item
						};
						switch (item.prewarningLevelID) {
							case "1":
								markers_jb.push(marker);
								break;
							case "2":
								markers_jj.push(marker);
								break;
							case "3":
								markers_js.push(marker);
								break;
							case "4":
								markers_zc.push(marker);
								break;
							default:
								break;
						}
					}
				});
				this.markers_jb = markers_jb;
				this.markers_jj = markers_jj;
				this.markers_js = markers_js;
				this.markers_zc = markers_zc;
				this.markers = [
					...markers_jb,
					...markers_jj,
					...markers_js,
					...markers_zc
				];
				uni.$emit('get-marker-length', {
					zc: markers_zc.length,
					js: markers_js.length,
					jj: markers_jj.length,
					jb: markers_jb.length
				});
			},
			regionChange(e) {
				if (e.type === 'end') {
					this.map.getScale({
						success: res => {
							this.scale = res.scale
							if (res.scale > 15) {
								if(this.markers.length && this.markers[0].label){
									return;
								}
								this.markers = this.markers.map(item => {
									item.label = {
										content: item.attr.monitoringPositionName
									}
									return item;
								})
							} else {
								if(this.markers.length && !this.markers[0].label){ 
									return;
								}
								this.markers = this.markers.map(item => {
									item.label = null;
									return item;
								})
							}
						}
					})
				}
			},
			handleMarkerClick(e) {
				if(this.scale>15){
					const id = e.target.markerId;
					const marker = this.markers.find(item=>item.id===id);
					this.infoWindow = true;
					uni.getSubNVueById('info-window').show('slide-in-top',300);
					uni.$emit('marker-click',marker.attr);
				}
			},
			mapClick(){
				if(this.infoWindow){
					uni.getSubNVueById('info-window').hide('slide-in-top',300);
					this.infoWindow = false;
				}
			}
		}
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
		overflow: hidden;
	}
	
	.search-bar{
		width: 750rpx;
		padding: 12rpx 15rpx;
		background-color: #ddd;
	}
	.search-bar__content{
		width: 720rpx;
		height: 50rpx;
		background-color: #fff;
		font-size: 24rpx;
		color: #ddd;
		border-radius: 8rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.search-input {
		width: 585rpx;
		height: 44rpx;
		color: #000;
		background-color: #fff;
		font-size: 16rpx;
		padding: 0 12rpx;
	}
	.search-button{
		color: #ddd;
		border: 0;
		margin: 0;
		padding: 0;
	}

	.monitor {
		height: 100%;
		background-color: #f9f9f9;
		position: relative;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 16px;
		color: #fff;
		text-align: center;
		background: url("../../static/image/navbg.png") no-repeat center;
	}

	.mapDiv {
		width: 750rpx;
		height: 100vh;
		position: relative;
	}


</style>
